import React, { useEffect, useState } from 'react'
import { NavBar } from 'react-vant';
import { useNavigate } from 'react-router-dom'
import { Dropdown } from 'antd-mobile'
import axios from 'axios';
import './index.scss'
import { SideBar } from 'antd-mobile'
import { tabs } from './tabs'
import { tabs2 } from './tabs'
import classNames from 'classnames'
import { Selector } from 'antd-mobile'
import { options, options2, options3 } from './options'
const Index: React.FC = () => {
    const [activeKey, setActiveKey] = useState('key1')
    const navigate = useNavigate()
    const [list, setlist] = useState([])
    // 当前页码，初始为1
    const [currentPage, setCurrentPage] = useState(1);
    // 每页显示的数据数量，可根据实际情况调整
    const PAGE_SIZE = 10;
    // 用于标记是否正在加载数据，避免重复请求
    const [isLoading, setIsLoading] = useState(false);
    // 用于判断是否滚动到底部的阈值（单位为像素，这里设为200，可按需调整）
    const threshold = 200;
    useEffect(() => {
        const fetchInitialData = async () => {
            try {
                setIsLoading(true);
                const res = await axios.get('/api/date', {
                    params: {
                        currentPage: 1,
                        pageSize: PAGE_SIZE
                    }
                });
                setlist(res.data.data)
                setIsLoading(false)
            } catch (error) {
                console.error('获取初始数据出错:', error);
                setIsLoading(false);
            }
        }
        fetchInitialData();
    }, [])
    const fetchMoreData = async () => {
        if (isLoading) {
            return;
        }
        setIsLoading(true);
        try {
            const nexPage = currentPage + 1;
            const res = await axios.get('/api/date', {
                params: {
                    currentPage: nexPage,
                    pageSize: PAGE_SIZE
                }
            });
            setlist(prevList => [...prevList, ...res.data.data])
            setCurrentPage(nexPage);
        }
        catch (error) {
            console.error('获取更多数据出错:', error);
        } finally {
            setIsLoading(false);
        }
    }
    useEffect(() => {
        const handleScroll = () => {
            // 获取页面滚动高度
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            // 获取可视区域高度
            const windowHeight = document.documentElement.clientHeight;
            // 获取整个文档高度
            const documentHeight = document.documentElement.scrollHeight;
            // 判断是否滚动到底部（考虑阈值），如果是则调用获取更多数据的函数
            if (scrollTop + windowHeight + threshold >= documentHeight && !isLoading) {
                fetchMoreData();
            }
        }
        window.addEventListener('scroll', handleScroll);
        return () => {
            window.removeEventListener('scroll', handleScroll);
        }
    }, [isLoading])
    const shuanxing = () => {
        navigate(0)
    }
    return (
        <div>
            <NavBar fixed={true}
                title="安医院找医生"
                leftText="返回"
                onClickLeft={() => navigate(-1)}
            />
            <div className='zhaoojoj' style={{ marginTop: 45 }}>
                <Dropdown>
                    <Dropdown.Item key='sorter' title='科室'>
                        <div className='container'>
                            <div className='side'>
                                <SideBar activeKey={activeKey} onChange={setActiveKey}>
                                    {tabs.map(item => (
                                        <SideBar.Item key={item.key} title={item.title} />
                                    ))}
                                </SideBar>
                            </div>
                            <div className='main'>
                                {
                                    tabs.map(item => (
                                        <div
                                            key={item.key}
                                            className={classNames(
                                                'content',
                                                activeKey === item.key && 'active'
                                            )}
                                        >
                                            {item.title}
                                            {
                                                item.children.map((item1: any, index: any) => {
                                                    return <p key={index} onClick={shuanxing}>{item1.name}</p>
                                                })
                                            }
                                        </div>
                                    ))
                                }
                            </div>
                        </div>
                    </Dropdown.Item>
                    <Dropdown.Item key='bizop' title='疾病'>
                        <div className='container'>
                            <div className='side'>
                                <SideBar activeKey={activeKey} onChange={setActiveKey}>
                                    {tabs2.map(item2 => (
                                        <SideBar.Item key={item2.key} title={item2.title} />
                                    ))}
                                </SideBar>
                            </div>
                            <div className='main'>
                                {
                                    tabs2.map(item2 => (
                                        <div
                                            key={item2.key}
                                            className={classNames(
                                                'content',
                                                activeKey === item2.key && 'active'
                                            )}
                                        >
                                            {item2.title}
                                            {
                                                item2.children.map((item1: any, index: any) => {
                                                    return <p key={index}>{item1.name}</p>
                                                })
                                            }
                                        </div>
                                    ))
                                }
                            </div>
                        </div>
                    </Dropdown.Item>
                    <Dropdown.Item key='more' title='筛选'>
                        <div>
                            <p>医院级别</p>
                            <Selector
                                options={options}
                                defaultValue={['1']}
                                onChange={(arr, extend) => console.log(arr, extend.items)}
                            />
                        </div>
                        <div>
                            <p>医院级别</p>
                            <Selector
                                options={options2}
                                defaultValue={['1']}
                                onChange={(arr2, extend2) => console.log(arr2, extend2.items)}
                            />
                        </div>
                        <div>
                            <p>医院级别</p>
                            <Selector
                                options={options3}
                                defaultValue={['1']}
                                onChange={(arr, extend) => console.log(arr, extend.items)}
                            />
                        </div>

                    </Dropdown.Item>
                </Dropdown>
            </div>
            <div className='zhaotwo'>
                {
                    list.map((item: any, index: number) => {
                        return <div key={index}>
                            <p>{item.hospital}----{item.address}</p>
                            <p>{item.keshi}</p>
                        </div>
                    })
                }
                {isLoading && <div>正在加载更多...</div>}
            </div>
        </div>
    )
}

export default Index
